<template>
  <div class="userIcon">
    <div class="carid">
      <div class="carid_cat">
        <img src="../../../assets/user.png" alt="" />
        <div class="user">
          <p>邮箱地址:{{ user.email }}</p>
          <span class="carid_cat_span">用户名:{{ user.username }}</span>
          <p>电话号码:{{ user.phone }}</p>
        </div>
        <router-link to="/profile" class="tourl"
          ><i class="iconfont icon-xitongshezhi"></i> 账号管理</router-link
        >
      </div>
    </div>
    <div class="order">
      <div><i class="iconfont icon-a31daifukuan"></i> 待付款</div>
      <div><i class="iconfont icon-daishouhuo"></i> 待收货</div>
      <div><i class="iconfont icon-daishouhuo"></i> 已完成</div>
      <div><i class="iconfont icon-quanbudingdan"></i> 全部订单</div>
    </div>
    <!-- 关注的商品 -->
    <div class="order">
      <div><i>20</i>关注的商品</div>
      <div><i>5</i>关注的店铺</div>
      <div><i>10</i>我的足迹</div>
    </div>
    <div class="recommend"></div>
    <div class="shoppon"></div>
  </div>
</template>

<script>
import { userInfo } from "../../../api/index";
export default {
  data() {
    return {
      user: {},
    };
  },
  created() {
    userInfo((res) => {
      console.log(res);
      this.user = res.data;
      console.log(this.user);
    });
  },
};
</script>

<style lang="scss" scoped>
.userIcon {
  margin-top: 80px;
  background-color: #f7f7f7;
  .carid {
    padding: 20px;
    width: 100%;
    height: 200px;
    .carid_cat {
      // display: flex;
      position: relative;
      width: 94%;
      height: 100%;
      background: linear-gradient(90deg, #eb3c3c, #ff7459);
      box-shadow: 0 0.026667rem 0.066667rem rgb(255 98 98 / 40%);
      border-radius: 20px;
      img {
        width: 120px;
        margin-top: 40px;
        margin-left: 30px;
      }
      // .carid_cat_span {
      //   position: absolute;
      //   left: 180px;
      //   top: 50px;
      //   font-size: 25px;
      //   color: white;
      // }
      .tourl {
        position: absolute;
        top: 0;
        margin-top: 10px;
        right: 30px;
        font-size: 25px;
      }
    }
  }
}
.user {
  position: absolute;
  left: 180px;
  top: 50px;
  font-size: 25px;
  color: white;
}
.order {
  display: flex;
  justify-content: space-around;
  text-align: center;
  background-color: white;
  margin-top: 10px;
  div {
    display: flex;
    flex-direction: column;
    font-size: 30px;
    margin-bottom: 20px;
    i {
      font-size: 60px;
      margin-bottom: 10px;
    }
  }
}
</style>